import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Box } from '@mui/material';

const IOSAppStoreCard = ({
  titleComponent,      // Now takes a React component instead of a string
  subtitleComponent,   // Now takes a React component instead of a string
  expandedTitleComponent, // Optional expanded version of the title
  expandedSubtitleComponent, // Optional expanded version of the subtitle
  paddingX = 2,
  paddingY = 2,
  borderRadius = 2,
  backdropColor = '#000000',
  backdropOpacity = 0.7,
  children
}) => {
  const [isOpen, setIsOpen] = useState(false);
  
  // Generate a unique identifier for this card instance
  const [id] = useState(() => Math.random().toString(36).substring(2, 15));
  
  // Simple toggle function
  const toggleCard = () => setIsOpen(!isOpen);

  return (
    <>
      {/* Backdrop for closing */}
      {isOpen && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 10
          }}
          onClick={toggleCard}
        />
      )}
      
      {/* Card container */}
      <div 
        className="card-container" 
        style={{
          position: 'relative',
          width: '100%',
          height: '100%'
        }}
      >
        <motion.div
          layoutId={`card-${id}`}
          onClick={toggleCard}
          style={{
            position: isOpen ? 'fixed' : 'relative',
            top: isOpen ? '10vh' : 'auto',
            left: isOpen ? '5vw' : 'auto',
            width: isOpen ? '90vw' : '100%',
            height: isOpen ? '80vh' : '100%',
            borderRadius: borderRadius * 4, // Reduced by half
            overflow: 'hidden',
            zIndex: isOpen ? 50 : 1,
            cursor: 'pointer',
            backgroundColor: backdropColor,
            opacity: backdropOpacity,
            WebkitTapHighlightColor: 'transparent'
          }}
        >
          {/* Content container */}
          <motion.div
            layoutId={`content-${id}`}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              padding: `${paddingY}rem ${paddingX}rem`,
              zIndex: 2,
              textAlign: 'center'
            }}
          >
            {/* Title component */}
            <Box mb={1.5} sx={{ width: '100%' }}>
              {isOpen && expandedTitleComponent ? expandedTitleComponent : titleComponent}
            </Box>
            
            {/* Subtitle component */}
            <Box sx={{ width: '100%' }}>
              {isOpen && expandedSubtitleComponent ? expandedSubtitleComponent : subtitleComponent}
            </Box>
            
            {/* Additional content */}
            {isOpen && children && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                style={{ 
                  marginTop: '1.5rem',
                  width: '100%'
                }}
              >
                {children}
              </motion.div>
            )}
          </motion.div>
        </motion.div>
      </div>
    </>
  );
};

export default IOSAppStoreCard;